<template>
    <div class="flex items-center mb-20px">
        <p class="text-14px font-bold">关键词</p>
        <div class="w-250px ml-12px">
            <el-input v-model="form.keyword" placeholder="请输入关键词" clearable></el-input>
        </div>
        <p class="text-14px font-bold ml-20px">标题</p>
        <div class="w-250px ml-12px">
            <el-input v-model="form.title" placeholder="请输入标题" clearable></el-input>
        </div>
        <template v-if="platforms.length">
            <p class="text-14px font-bold ml-20px">发布平台</p>
            <div class="w-150px ml-12px">
                <el-select v-model="form.platform" placeholder="请选择" clearable>
                    <el-option 
                        v-for="item in platforms" 
                        :key="item.Name" 
                        :label="item.Name" 
                        :value="item.Name">
                    </el-option>
                </el-select>
            </div>
        </template>
        <el-button type="primary" class="ml-12px" @click="handleSearch">搜索</el-button>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { IPlatform } from '@/api/geoBasic/types'

const form = reactive({
    keyword: '',
    title: '',
    platform: ''
})

defineProps({
    platforms: {
        type: Array as PropType<IPlatform[]>,
        default: () => []
    }
})

const emit = defineEmits(['search'])

function handleSearch() {
    emit('search', form)
}
</script>

<style scoped></style>